<template>
  <div>
    <div class="el-card">
      <!-- // 第一个div -->
      <div class="box1">
        <el-input
          placeholder="根据用户名搜索"
          size="small"
          v-model="input"
        ></el-input>
        <el-button size="small" style="margin-left: 15px" @click="clear"
          >清除</el-button
        >
        <el-button size="small" type="primary" @click="search">搜索</el-button>
        <el-button
          size="small"
          type="success"
          style="margin-left: 1224px"
          icon="el-icon-edit"
          @click="addNew"
          >新增权限组</el-button
        >
        <PermissionsAdd
          :dialogFormVisible="dialogVisible"
          @close="close"
          @newDataes="getPermissions"
          :objeditId.sync="objeditId"
        />
      </div>
      <div class="box2">
        <el-alert type="info" show-icon :closable="false">
          <template slot="title"> 共 {{ tableData1.length }} 条记录 </template>
        </el-alert>
      </div>
      <div class="box3">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{ background: '#FAFAFA' }"
        >
          <el-table-column type="selection" width="400"></el-table-column>
          <el-table-column
            prop="title"
            label="用户名"
            width="400"
          ></el-table-column>
          <el-table-column
            prop="create_date"
            label="日期"
            width="720"
          ></el-table-column>
          <el-table-column label="操作" width="120">
            <template v-slot="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="edit(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="delFn(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="box4">
        <PageTool
          :total="tableData1.length"
          :paginationPage="currentPage"
          :paginationPagesize="pagesize"
          @pageChange="pageChange"
          @pageSizeChange="pageSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { list, remove } from '@/api/base/permissions'
import PageTool from '@/module-manage/components/page-tool.vue'
import PermissionsAdd from '@/module-manage/components/permissions-add.vue'
// import { list, add, update } from '@/api/base/permissions'
export default {
  components: { PageTool, PermissionsAdd },
  data () {
    return {
      tableData: [],
      tableData1: [],
      currentPage: 1,
      pagesize: 10,
      input: '',
      title: '',
      arr: [],
      dialogVisible: false,
      objeditId: 0
    }
  },
  created () {
    this.getPermissions()
    this.getPermissionsAll()
  },

  methods: {
    async getPermissions () {
      const { data } = await list({
        page: this.currentPage,
        pagesize: this.pagesize,
        title: this.input
      })
      console.log(data)
      this.tableData = data.list
    },
    async getPermissionsAll () {
      const { data } = await list({
        page: this.currentPage,
        pagesize: 200000
      })
      console.log(data)
      this.tableData1 = data.list
    },
    search () {
      this.getPermissions()
    },
    clear () {
      this.input = ''
    },
    pageChange (a) {
      this.currentPage = a
      this.getPermissions()
    },
    pageSizeChange (a) {
      this.pagesize = a
      this.getPermissions()
    },
    delFn (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // this.del(row)
          await remove(row)
          this.getPermissions()
          this.$message({
            type: 'success',
            message: '成功删除了用户!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    close () {
      this.objeditId = 0
      this.dialogVisible = false
    },
    addNew () {
      console.log(this.objeditId)
      this.dialogVisible = true
    },
    edit (row) {
      this.dialogVisible = true
      this.objeditId = row.id
      console.log(this.objeditId)
    }
  }
}
</script>

<style scoped lang="less">
.el-card {
  margin: 20px;
  padding: 20px;
  .box1 {
    display: flex;
    .el-input {
      width: 200px;
      height: 32px;
    }
  }
}
.box2 {
  .el-alert {
    margin: 20px 0;
  }
}
.box4 {
  margin-top: 20px;
  display: flex;
  .el-pagination {
    margin-left: auto;
  }
}
</style>
